<%- include('header')%>

<!-- 登录部分 -->
<div class="login mb-50">
  <div class="container">
    <div class="row">
      <div class="col-md-7 hidden-sm hidden-xs">
        <img
          src="./img/featured.png"
          alt=""
          srcset=""
          style="margin-top: 20px"
        />
      </div>
      <div class="col-md-5">
        <form class="loginfrom" action="register" method="post">
          <div class="loginfrom-top">
            <h4 class="h4">登录</h4>
            <h4 class="h2click h4 register">注册</h4>
          </div>

          <!-- 登录 -->
          <div class="loginfrom-mid" style="display: none">
            <div class="input-group">
              <div class="input-group-addon bg-color-white">
                <span class="glyphicon glyphicon-user"></span>
              </div>
              <input
                type="text"
                class="form-control"
                id="exampleInputAmount"
                placeholder="请输入您的用户名"
              />
            </div>
            <div class="input-group">
              <div class="input-group-addon bg-color-white">
                <span class="glyphicon glyphicon-lock"></span>
              </div>
              <input
                type="text"
                class="form-control"
                id="exampleInputAmount"
                placeholder="请输入您的密码"
              />
            </div>
            <div class="loginfrom-mid-bottom">
              <div class="form-group-pwd">
                <div class="">
                  <div class="checkbox">
                    <label> <input type="checkbox" />记住密码 </label>
                  </div>
                </div>
              </div>
              <div class="form-group-login">
                <div class="">
                  <button
                    type="submit"
                    class="btn btn-default bg-color-primary color-white"
                  >
                    登 录
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 注册 -->
          <div class="register-mid" style="display: block">
            <div class="input-group">
              <div class="input-group-addon bg-color-white">
                <span class="glyphicon glyphicon-user"></span>
              </div>
              <input
                type="text"
                class="form-control"
                name="username"
                id="exampleInputAmount"
                placeholder="请输入您的用户名"
              />
              <div class="form-info text-danger"></div>
            </div>

            <div class="input-group">
              <div class="input-group-addon bg-color-white">
                <span class="glyphicon glyphicon-lock"></span>
              </div>
              <input
                type="password"
                class="form-control"
                name="password"
                id="exampleInputAmount"
                placeholder="请输入您的密码"
              />
            </div>
            <div class="input-group">
              <div class="input-group-addon bg-color-white">
                <span class="glyphicon glyphicon-lock"></span>
              </div>
              <input
                type="password"
                class="form-control"
                name="rePassword"
                id="exampleInputAmount"
                placeholder="请输入重复密码"
              />
            </div>
            <div class="loginfrom-mid-bottom">
              <div class="form-group-login">
                <div class="">
                  <button
                    type="submit"
                    class="btn btn-default bd-color-secondary color-white"
                  >
                    注 册
                  </button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- 登录结束 -->
<script>
  let h4 = document.querySelectorAll(".h4");

  var loginfrom = document.querySelector(".loginfrom-mid");
  var register = document.querySelector(".register-mid");

  for (let i = 0; i < h4.length; i++) {
    h4[0].onclick = function () {
      loginfrom.style.display = "block";
      register.style.display = "none";
      this.classList.add("h2click");
      h4[1].classList.remove("h2click");
    };
    h4[1].onclick = function () {
      loginfrom.style.display = "none";
      register.style.display = "block";
      this.classList.add("h2click");
      h4[0].classList.remove("h2click");
    };
  }
</script>
<%- include('footer')%>
